<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位显示页面</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <link rel="stylesheet" href="css/myCSS.css">
    <script type="text/javascript">
        var flag = false;
    </script>
</head>
<body>

<div style="float: left;width: 10%">
    <a href="http://120.27.237.68:8080/web/location.html">定位界面1</a><br/>
    <a href="http://120.27.237.68:8080/web/TD2.html">热力图1</a><br/>
    <a href="http://120.27.237.68:8080/web/TD.html">热力图2</a><br/>
</div>

<div style="float: right;width: 90%">

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" class="locationCss2"></div>

    <script type="text/javascript">
        // 刷新间隔
        var intervalTime = 100;
        // 单位长度
        var length = 1;
        // 横轴长度
        var width = 9;
        // 纵轴长度
        var height = 7.5;

        $.ajaxSettings.async = false;
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            legend: {
                data: ['定位轨迹图']
            },
            tooltip: {
                trigger: 'axis',
                formatter: '点 : <br/>{b} m : {c} m'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                interval: length,
                max: width
            },
            yAxis: {
                type: 'value',
                interval: length,
                max: height

            },
            series: [
                {
                    name: '定位轨迹图',
                    type: 'line',
                    symbolSize: 0,
                    symbol: 'circle',
                    smooth: true,
                    lineStyle: {
                        width: 3,
                        shadowColor: 'rgba(0,0,0,0.3)',
                        shadowBlur: 10,
                        shadowOffsetY: 8
                    },
                }
            ]
        };

        myChart.setOption(option);

        var value = new Array(4);
        //ajax请求
        $.ajax({
            type: "get",
            async: false,
            url: "getxy",
            data: {
                status: "PLACE2"
            },
            dataType: "json",
            success: function (data) {

                for (var i = 0; i < data.length; i++) {
                    value.push([data[i].x, data[i].y]);
                }

                myChart.hideLoading(); //隐藏加载动画
                myChart.setOption({
                    series: [{
                        // 根据名字对应到相应的数据s
                        data: value
                    }]
                });

            },
            error: function () {

            }
        });
    </script>


</div>


</body>
</html>
